import React from 'react'

import { useDispatch, useSelector } from 'react-redux'

import { increment, decrement } from '../../store/slice/countSlice'

/* 
  react-redux提供了两个hook 用来操作redux
    - useDispatch() 得到一个dispatch方法
    - useSelector() 参数是一个回调函数,回调函数的形参就是store中的数据

*/

// 1.引入useDispatch得到一个dispatch方法来帮我们处理
//2.替换掉所有的 store.dispatch
//3.引入useSelector,传入一个参数就是state的值,里面包含有Count和Movie的数据
// 我们return什么得到就是什么,先拿到count的数据

export default function Count() {
  const dispatch = useDispatch()
  const count = useSelector(state => state.count.count)
  


 

  const incrementHandle = () => {
    dispatch(increment(10))
  }

  const decreamentHandle = () => {
    dispatch(decrement(3))
  }

  const ifOddDecrementHandle = () => {
    if (count % 2 !== 0) {
      dispatch(increment(5))
    }
  }

  const waitDecrementHandle = () => {
   
  }



  return (
    <div>
      <h1>我是Count组件 我的值是{count}</h1>
      <h2>当前的电影总是数 {}</h2>
      <div>
        <button onClick={incrementHandle}>累加</button>
        <button onClick={decreamentHandle}>累减</button>
        <button onClick={ifOddDecrementHandle}>如果是奇数再加1</button>
        <button onClick={waitDecrementHandle}>等2s再加1</button>
      </div>

    </div>
  )
}
